<template>
    <div style="position: fixed; top: 0; width: 100%; z-index: 1">
        <van-dropdown-menu active-color="#f1929d">
            <van-dropdown-item v-model="order" :options="orderAry" @click="changeOrder"/>
        </van-dropdown-menu>
    </div>

    <div style="height: 60px; background-color: #e1e1e1"></div>

    <div class="comic-list-container" ref="container">
        <long-list v-for="item in comics.docs" :message="item" :key="item.id"></long-list>
        <div class="btn-container">
            <van-pagination v-model="comics.page" :page-count="comics.pages" :items-per-page="3" @change="changePage">
                <template #page="{ text }">{{ text }}</template>
            </van-pagination>
        </div>
        <div style="width: 100%; height: 40px; background-color: #e1e1e1"></div>
    </div>
    <van-overlay v-model:show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>
</template>

<script>
import {useRoute} from 'vue-router'
import longList from "@/components/main/part/longList";
import {onActivated, onDeactivated, onMounted, reactive, ref} from "vue";
import {_getComics} from "@/apis/comicAPI";
import loadingBox from "@/components/main/part/loadingBox";

export default {
    name: "comicList",
    components: {
        longList,
        loadingBox
    },
    setup() {
        let route = useRoute()
        let block = route.query.block;
        let newBlock = '';
        let comics = reactive({
            docs: [],
            total: '',
            limit: '',
            pages:'',
            page:1
        })

        const order = ref('UA');
        const showToast = ref(true)
        const orderAry = [
            {text: '默认', value: 'UA'},
            {text: '从新到旧', value: 'dd'},
            {text: '从旧到新', value: 'da'},
            {text: '最多爱心', value: 'ld'},
            {text: '最多指名', value: 'vd'},
        ];

        /*s must be one of [UA, CA, da, dd, ld, vd]*/
        function changeOrder() {
            comics.page = 1
            getComicList(block, order, comics.page)
        }

        /*
        * 获取列表
        * */
        async function getComicList(block, order, page) {
            showToast.value = true
            const data = {
                block,
                order,
                page
            }
            await _getComics(data, res => {
                console.log(res.data)
                comics.docs = res.data.data.comics.docs;
                comics.page = res.data.data.comics.page;
                comics.pages = res.data.data.comics.pages;
                window.scrollTo(0, 0);
                showToast.value = false
            }, () => {
                alert("获取失败")
            })
        }

        onMounted(() => {
            getComicList(block, order.value, comics.page)
        })

        /*
        * 点击新的分区时起效
        * */
        onActivated(() => {
            newBlock = route.query.block;
            if (newBlock != block) {
                comics.docs = []
                getComicList(newBlock, order.value, comics.page)
            }
        })

        onDeactivated(() => {
            order.value = "UA"
        })

        function changePage() {
            getComicList(block,order.value,comics.page)

        }

        return {
            block,
            changePage,
            showToast,
            comics,
            order,
            orderAry,
            changeOrder
        }
    },
    methods: {
        setContainer() {
            let width = document.documentElement.clientWidth;
            this.$refs.container.style.width = width + 'px';
        },
    },
    mounted() {
        this.setContainer()
    }
}
</script>

<style scoped>
.comic-list-container {
    background-color: #e1e1e1;
}

.btn-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>